import { ChangeDetectionStrategy, Component } from '@angular/core';

@Component({
  selector: 'app-card',
  templateUrl: './card.component.html',
  styles: [
    `
      .ui-card {
        cursor: pointer; 
        width: 288px;
      }
      .ui-card:not(.lv-card-disabled):hover {
        cursor: pointer;
      }
      .ui-card:not(.lv-card-disabled):not(.lv-card-checked):hover {
        border-color: #4d4d4d;
      }
      ::ng-deep .ui-card:hover .ui-card-checkbox.lv-checkbase:not([disabled]) .lv-checkbox-inner{
        border-color: #2673e5;
      }
      .ui-card p {
        word-break: break-all;
        font-size: 12px;
        line-height: 18px;
      }
      .ui-card-check-content {
        width: 100%;
      }
      .ui-card-check-content .lv-checkbase.lv-checkbase-no-label {
        position:relative;
        top:3px;
      }
    `,
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CardComponent {
  cardData = [
    {
      id: 'card1',
      disabled: true
    },
    {
      id: 'card2',
      disabled: true
    },
    {
      id: 'card3',
      disabled: false
    },
    {
      id: 'card4',
      disabled: false
    },
    {
      id: 'card5',
      disabled: false
    },
    {
      id: 'card6',
      disabled: false
    }
  ];
  selected = [this.cardData[0].id, this.cardData[2].id];

  change(val) {
    this.selected = val;
    console.log(`已选择： ${val}`);
  }

  toggle(data) {
    if (data.disabled) {
      return;
    }
    const removeIndex = this.selected.findIndex(item => item === data.id);
    if (removeIndex === -1) {
      this.selected.push(data.id);
    } else {
      this.selected.splice(removeIndex, 1);
    }
    this.selected = [...this.selected];
  }
}
